<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>后台系统登录页面</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
    <style type="text/css">
        body {
            background-image: url(img/bgpic.jpg);
            background-repeat: no-repeat;
            background-size: cover;
        }

        .text {
            font-size: 14px;
        }

        .item {
            margin-bottom: 18px;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }

        .box-card {
            width: 480px;
        }

        .el-card__body {
            padding: 30px;
        }

        .myCard {
            margin: 20px auto;
            height: 210px;
            width: 350px;
            border: 0px;
            border-radius: 15px;
            opacity: 0.85;
        }

        .el-input__inner {
            border: 0px;
        }

        .myform i {
            margin-top: 10px;
            margin-left: 36px;
        }

        hr {
            margin: 0px 15px 0px 15px;
        }

        .el-form-item__content {
            margin-left: 0px;
        }

        .loginBtn {
            width: 260px;
            height: 35px;
            margin-left: 15px;
        }

        .block {
            text-align: center;
        }

        .headImg {
            border: 3px solid darkgray;
        }
        .title{
            letter-spacing:8px;
            line-height: 10px;
            margin-bottom: 50px;
            font-size: 50px;
            color: #333333;
        }
        .logoImg{
            width: 400px;
            height: 200px;
            margin: 75px 0px 10px 0px;
            opacity: 0.85;
        }
    </style>
</head>
<body>
<div id="main">
    <!-- 头像 -->
    <el-row class="demo-avatar demo-basic">
        <el-col :span="24">
            <div class="demo-basic--circle">
                <div class="block">
                    <img class="logoImg" src="/secondStage/img/logo111.png"/><br>
                    <el-avatar :size="85" :src="circleUrl" class="headImg"></el-avatar>
                </div>
            </div>
        </el-col>
    </el-row>
    <!-- 登录卡片 -->
    <el-card class="box-card myCard">
        <el-form :label-position="labelPosition" label-width="60px" :model="formLabelAlign" class="myform">
            <el-row :gutter="24">
                <el-col :span="4"><i class="el-icon-user"></i></el-col>
                <el-col :span="20">
                    <el-input v-model="formLabelAlign.name" placeholder="用户名" @change="isExist"></el-input>
                </el-col>
            </el-row>
            <hr>
            <el-row :gutter="24">
                <el-col :span="4"><i class="el-icon-lock"></i></el-col>
                <el-col :span="20">
                    <el-input type="password" v-model="formLabelAlign.pass" placeholder="密码"></el-input>
                </el-col>
            </el-row>
            <hr>
            <br>
            <el-row :gutter="24">
                <el-col :span="24">
                    <el-button type="primary" @click="onSubmit" class="loginBtn">登录</el-button>
                </el-col>
            </el-row>

        </el-form>
    </el-card>
</div>
</body>
<script type="text/javascript">
    var myvue = new Vue({
        el: "#main",
        data: {
            labelPosition: 'right',
            formLabelAlign: {
                name: '',
                pass: ''
            },
            circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"


        },
        methods: {
            isExist() {
                var nameCharge = window.Qs.stringify(this.formLabelAlign) + "&method=isExist";
                console.log(nameCharge);
                axios.post('/secondStage/login', nameCharge)
                    .then(response => {
                        if (response.data.returnCode == 200) {
                            this.circleUrl = response.data.returnData.aimg;
                        } else {
                            this.userNotExist();
                        }
                    }).catch(function (error) {
                    console.log(error);
                });
            },
            userNotExist() {
                this.$message({
                    showClose: true,
                    message: '用户名输入错误或账号不可用',
                    type: 'warning',
                    center: true
                });
            },
            loginFail() {
                this.$message({
                    showClose: true,
                    message: '密码输入错误，登陆失败',
                    type: 'error',
                    center: true
                });
            },
            onSubmit() {
                var submit = window.Qs.stringify(this.formLabelAlign) + "&method=submit";
                console.log(submit);
                axios.post('/secondStage/login', submit)
                    .then(response => {
                        if (response.data.returnCode == 200) {
                            location.href = "/secondStage/login?method=updateLoginTime&" + window.Qs.stringify(this.formLabelAlign);
                        } else {
                            this.loginFail();
                        }
                    }).catch(function (error) {
                    console.log(error);
                });
            }
        }
    })
</script>
</html>
